<template>
	<view class="container">
		<!-- 头部 -->
		<uni-nav-bar backgroundColor="rgb(255 22 69)" :fixed="true" :statusBar="true" :border="false">
		    <view class="header">
					<uni-search-bar class="search" cancelButton="none" radius="30" @click="$goURl('/pages/business/search')"></uni-search-bar>
				</view>
				<block v-slot:left>
					<uni-icons @click="back('/pages/index/index')" class="rr-icons" color="#FFF" type="home" size="25"></uni-icons>
				</block>
				<block v-slot:right style="width: 40px;">
					<uni-icons type="scan" size="25" color="#FFF"  @click="scan()"></uni-icons>
				</block>
		</uni-nav-bar>
		<!-- 内容 -->
		<view class="content">
			<!-- 热搜 -->
<!-- 			<view class="titlebox">
				热搜: <text class="itembox">餐饮</text>
			</view> -->
			<!-- 分类 -->
			<view class="list">
				<view class="item" v-for="item in data.shopClassList" :key="item.ID"  @click="$goURl('/pages/business/businesslist?id='+item.ID)">
					<image class="imgs" :src="item.img" mode=""></image>
					<view class="text">
						{{item.name}}
					</view>
				</view>
					<empty v-if="data.shopClassList.length==0"></empty>
			</view>
			<image class="bgimg" src="https://img.fubaozx.cn/static/oldImg/16995006305942.png" mode=""></image>
			<!-- 优选商家 -->
			<view class="preferred">
				<view class="topbox">
					<view class="top1">
						优选商品
					</view>
					<view class="top2">
						选择困难症必戳
					</view>
				</view>
				<view class="listbox">
					<scroll-view :scroll-x="true" class="scroll-view_H" show-scrollbar="false">
						<view class="listboxs">
							<view class="item" v-for="(item,index) in data.goodslist" :key="index" @click="$goURl('/pages/commodity/details?id='+item.ID)">
								<view class="zsimg">
									<image :src="item.img" mode="aspectFill"></image>
								</view>
								<view class="shoptitle textsl1">
									{{item.business.name?item.business.name:$store.state.name}}
								</view>
								<view class="goodstitle textsl1">
									{{item.name}}
								</view>
								<view class="goodsprice ">
									<text class="price">￥</text>
									<text class="price">{{$toFiexd(item.price,2)}}</text>
									<!-- <text class="price ">￥{{$toFiexd(item.market,2)}}</text> -->
								</view>
							</view>
							<empty v-if="data.goodslist.length==0"></empty>
						</view>
					</scroll-view>
				</view>



			</view>
			<!--附近商家  -->
			<view class="preferred">
				<view class="topbox">
					<view class="top1">
						优选商家
					</view>
					<view class="top2">
						探索周围好店
					</view>
				</view>

				<view class="listbox">
					<empty v-if="data.businessList.length==0"></empty>
					<view class="" v-for="(item,index) in data.businessList"  @click="$goURl('/pages/business/businessdetail?id='+item.ID)">
						<view class="items">
							<view class="image">
								<image :src="item.shop_head" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="top textsl1">
									{{item.name}}
								</view>
								<view class="center">
									<view class="infobox">
										<view class="info">
											<text class="star"> <uni-rate size="10" :disabled="true" disabledColor="#FFC41F" :value="item.star" /></text>
											|
										<image src="https://img.fubaozx.cn/static/oldImg/16995006753410.png" mode=""></image>
											<text class="time">{{item.start_time?item.start_time:'9:00'}}-{{item.end_time?item.end_time:'18:00'}}</text>
										</view>
										<view class="label">
											优选商家
										</view>
									</view>
									<view class="phone">
									</view>
								</view>
								<view class="bottom">

								</view>
							</view>
						</view>
						<view class="line"  v-if="index<(data.businessList.length-1)">

						</view>
					</view>

				</view>
			</view>
			<uni-load-more :status="data.loadmore"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import  * as qrcode from "../../static/js/reqrcode.js"
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		city:'重庆',
		shopClassList:[],
		page:0,
		size:10,
		pages:1,
		shopList:[],
		loadmore:'none',
		goodslist:[],
		businessList:[]
	})
	onLoad((option)=>{
		getbusinessList()
	})
	onShow(()=>{
		data.goodslist=[]
		shopClassList()
		getgoods()
	})
	onPullDownRefresh(()=> {//下拉刷新
			data.businessList=[]
			data.goodslist=[]
			data.page=0
			data.pages=1
			shopClassList()
			getgoods()
			getbusinessList()
			setTimeout(()=> {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{//上拉加载
		getbusinessList()
		console.log('onReachBottom')
	})
	// 获取商品
	function getgoods(){
		proxy.$request({
			url:`api/listBidding/?page=1&size=10&partition=2`,
			method:'get',
			success:(res)=>{
				res.data.data.forEach(item=>{
						item['price']=item.goods.price
						item['name']=item.goods.name
						item['img']=item.goods.img
						item['ID']=item.goods.ID
					data.goodslist.push(item)
				})
				if(res.data.total<10){
					proxy.$request({
						url:`api/goods_list_all/0/?page=1&size=10`,
						method:'get',
						data:{
							page:data.page,
							size:data.size
						},
						success:(ress)=>{
							ress.data.data.forEach(item=>{
								data.goodslist.push(item)
							})
						}
					})
				}


			}
		})



	}
	// 获取商家
	function getbusinessList(){
		if(data.page<data.pages){
			data.page++
			proxy.$request({
				url:`api/listBidding/?page=${data.page}&size=${data.size}&partition=3`,
				method:'get',
				success:(res)=>{
					data.pages = Math.ceil(res.data.total / data.size)
					res.data.data.forEach(item=>{
						item['name']=item.business.name
						item['shop_head']=item.business.shop_head
						// item['province']=item.business.province
						// item['city']=item.business.city
						// item['area']=item.business.area
						// item['address']=item.business.address
						item['star']=item.business.star
						item['ID']=item.business.ID
						data.businessList.push(item)
					})
					if(res.data.total<10){
						proxy.$request({
							url:`api/businessList/?page=1&size=50&is_excellent=1&code=0`,
							method:'get',
							success:(ress)=>{
								ress.data.data.forEach(item=>{
									data.businessList.push(item)
								})
							}
						})
					}

				}
			})

		}
	}

	// 获取商家分类
	function shopClassList (){
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999&code=0&is_display=1`,
			method: 'get',
			success(res) {
				data.shopClassList=res.data.data
			}
		})
	}
	// 扫码
	function scan(){
		console.log('扫码')
		// #ifdef APP-PLUS
		uni.scanCode({
			success: function (res) {
				console.log('条码类型：' + res);
				let dats=''
				dats = res.result.split('=')
				proxy.$goURl('/pages/business/pay?id='+dats[0]+'&discount='+dats[1]+'&notes='+dats[2]+'&money='+dats[3])
			},
			fail(err) {
				console.log('err：' + err);
				uni.showToast({
					icon:'none',
					title:'扫码失败'
				})
			}
		});
		// #endif

		// #ifdef H5
		imgUp()
		// #endif

	}
	function 	imgUp() {
		uni.chooseImage({
			sizeType: ['original'],
			count: 1,
			success: function(res) {
				const tempFilePaths = res.tempFilePaths
				qrcode.qrcode.decode(tempFilePaths[0]);
				qrcode.qrcode.callback=function(img){
					if(img=="error decoding QR Code"){
						uni.showToast({
							title:"识别二维码失败，请重新上传！",
							duration:2000,
							icon:'none'
						})
					}else{
						console.log('img',img)
						let dats= img.split('=')
						proxy.$goURl('/pages/business/pay?id='+dats[0]+'&discount='+dats[1]+'&notes='+dats[2]+'&money='+dats[3])
					}
				}
			}
		});
	}
	function back(url){
		uni.switchTab({
			url:url
		})


	}

</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	::v-deep .uni-navbar__header-btns-left{
		width: 40px !important;
		display: flex;
		justify-content: space-around;
		color: #fff;
		font-size: 28upx;
		.combox{
			color: #fff;
			font-weight: bold;
			z-index: 99;
		}
	}
	::v-deep .uni-navbar__header-btns-right{
		width: 40px !important;
	}
	.container{
		background-image: url('https://img.fubaozx.cn/static/oldImg/16995006971194.png') ;
		background-repeat: no-repeat;

		background-size: 100% 30vh;
		background-position: top;
		height: 100vh;
	}
	.header{
		display: flex;
		align-items: center;
		width: 100%;
		.search{
			width: 100%;
			padding: 0;
		}
	}
	.barimg{
		width: 60upx;
		height: 60upx;
	}
	.content{
		position: relative;
		.titlebox{
			padding: 10upx 30upx;
			color:#fff;
			font-size: 24upx;
			.itembox{
				padding: 3upx 15upx;
				font-size: 20upx;
				background-color: #FF5175;
				border-radius: 20upx;
				margin-left: 10upx;
			}
		}
		.list{
			margin: 30upx;
			padding: 30upx;
			background-color: #fff;
			border-radius: 30upx;
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 20%;
				text-align: center;
				margin-bottom: 30upx;
				.imgs{
					width: 80upx;
					height: 80upx;
					margin: 0 auto;
				}
				.text{
					text-align: center;
					font-size: 24upx;
					color: #333;
					margin-top: 10upx;
				}
			}
		}
		.preferred{
			border-top: 30upx solid #f5f5f5;
			.topbox{
				display: flex;
				padding: 30upx;
				align-items: flex-end;
				.top1{
					color:#333;
					font-size: 36upx;
					font-weight: bold;
				}
				.top2{
					color:#ccc;
					font-size: 24upx;
					margin-left: 10upx;
				}
			}
			.listboxs{

				display: flex;
			}
			.listbox{
				margin: 30upx;
				padding: 30upx;
				box-shadow: 0 0 10upx #e1e1e1;
				border-radius: 20upx;
				.item{
					width: 250upx;
					margin-right: 20upx;
					.zsimg{
						width: 250upx;
						height: 200upx;
						position: relative;
						border-radius: 20upx;
						overflow: hidden;
						image{
							width: 250upx;
							height: 200upx;
						}
						.tr{
							position: absolute;
							right: 20upx;
							top: 20upx;
							background-color: rgba(0, 0, 0, 0.63);
							border-radius: 20upx;
							font-size: 20upx;
							color: #fff;
							padding: 5upx 10upx;
						}
					}
					.shoptitle{
						color: #999;
						font-size: 24upx;
					}
					.goodstitle{
						color:#333;
						font-size: 28upx;
						font-weight: bold;
					}
					.goodsprice{
						color: $color1;
						font-size: 20upx;
						display: flex;
						align-items: flex-end;
						.price:nth-child(2){
							font-size: 36upx;
						}
						.price:nth-child(3){
							color: #999;
							text-decoration:line-through;
						}
					}
				}
				.items{
					display: flex;
					margin: 20upx 0;
					.image{
						width: 200upx;
						height: 200upx;
						border-radius: 20upx;
						image{
							width: 200upx;
							height: 200upx;
							border-radius: 20upx;
						}
					}
					.right{
						width: calc(100% - 220upx );
						margin-left: 10upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.top{
							font-size: 32upx;
							font-weight: bold;
						}
						.center{
								display: flex;
								justify-content: space-between;
								align-items: center;
								.infobox{
										width: calc(100% - 70upx);

									.info{
										font-size: 20upx;
										display: flex;
										align-items: center;
										image{
											width: 26upx;
											height: 26upx;
											margin: 0 10upx;
										}
										.star{
											color: #999;
											margin-right: 10upx;
										}
										.time{
											color: $color1;

										}
									}
									.label{
										background-color: #FEF1E9;
										color:#FF4E00;
										font-size: 22upx;
										width: 100upx;
										padding: 4upx 10upx;
										border-radius: 10upx;
										margin: 10upx;
										margin-top: 20upx;
									}
								}

								.phone{
									width: 54upx;
									height: 54upx;
									image{
										width: 54upx;
										height: 54upx;
									}
								}

						}
						.bottom{
							width: 100%;
							font-size: 20upx;
							display: flex;
							justify-content: space-between;
							.textsl1{
								width: 90%;
							}
						}
					}
				}
				.line{
					width: 100%;
					border: 1upx solid #f4f4f4;
				}
			}
		}
		.bgimg{
			width: 100%;
			height: 200upx;
			margin-top: -200upx;
			// position: absolute;
			// top: calc(35vh - 200upx) ;
		}
	}
</style>
